<template>
  <div class="messAudio clearfix">
    <i
      :class="{
        'messAudio-icon': true,
        'messAudio-icon__disabled': disabled,
        'messAudio-icon__self': props.isSelf,
        'messAudio-icon__other': !props.isSelf,
      }"
      @click="play"
    >
      <SvgIcon icon-class="play" popper-class="icon-play" v-if="!isPlay" />
      <SvgIcon icon-class="pause" v-else />
    </i>
    <div class="messAudio-waveContainer" ref="waveRef"></div>
    <span
      :class="{
        'messAudio-time': true,
        'messAudio-time__self': props.isSelf,
        'messAudio-time__other': !props.isSelf,
      }"
      >{{ Math.floor(duration) }}"</span
    >
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const props = withDefaults(
  defineProps<{
    duration?: number;
    src: string;
    waveSurfer: any;
    isSelf: boolean;
  }>(),
  {
    duration: 0,
  }
);

/**
 * 给放波形的元素一个ref属性
 */
const waveRef = ref<HTMLDivElement>();
/**
 * 是否正在播放语音
 */
const isPlay = ref<boolean>(false);
/**
 * waveSurfer实例
 */
let waveSurfer: any;
/**
 * 波形图的宽度
 */
const waveWid = ref<string>("30px");
/**
 * 是否禁止播放
 */
const disabled = ref<boolean>(true);

// 播放语音或者暂停语音
const play = () => {
  if (!disabled.value) {
    waveSurfer.playPause.bind(waveSurfer)();
    isPlay.value = !isPlay.value;
  }
};

onMounted(() => {
  const { floor, ceil } = Math;
  const duration: number = floor(props.duration);
  if (duration > 5 && duration <= 10) waveWid.value = "50px";
  else if (duration > 10) waveWid.value = 50 + (ceil(duration / 10) - 1) * 23 + "px";

  waveSurfer = props.waveSurfer.create({
    container: waveRef.value,
    preload: true,
    height: 25,
    progressColor: props.isSelf ? "#7fccf99a" : "#333",
    hideScrollbar: true,
    waveColor: props.isSelf ? "#fff" : "#7a7a7a",
    cursorColor: props.isSelf ? "#fff" : "#333",
    cursorWidth: 1.5,
  });
  waveSurfer.load(props.src);
  waveSurfer.on("finish", () => {
    isPlay.value = false;
    // 进度跳转到0
    waveSurfer.seekTo(0);
  });

  waveSurfer.on("ready", () => (disabled.value = false));
});

onBeforeUnmount(() => waveSurfer.destroy());
</script>

<style lang="scss" scoped>
.messAudio {
  display: flex;
  align-items: center;

  &-icon {
    @include setWidHei(20px, 20px);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 3px;
    box-sizing: border-box;
    float: left;
    margin-right: 8px;

    &__other {
      border: 1.5px solid #333;
      color: #333;
    }

    &__self {
      border: 1.5px solid #fff;
      color: #fff;
    }

    .icon-play {
      margin-left: 1px;
    }

    &__disabled {
      cursor: not-allowed;
    }
  }

  &-waveContainer {
    float: left;
    width: v-bind(waveWid);
    height: 25px;
    overflow: hidden;
  }

  &-time {
    font-size: 14px;
    margin-left: 8px;

    &__self {
      color: #fff;
    }

    &__other {
      color: #333;
    }
  }
}
</style>
